<template>
  <view class="container">
    <view class="header">
      <image :src="user.avatarUrlWbxqy" class="avatar"/>
      <text class="user-id">ID: {{ user.userIdWbxqy?.toString().padStart(8, '0') }}</text>
      <text class="department-name">{{ user.department?.departmentNameWbxqy }}:{{ user.usernameWbxqy }}</text>
      <uni-tag
          v-if="user.roleWbxqy !== 'S'"
          text="用户">
      </uni-tag>
      <uni-tag
          v-else
          text="司机">
      </uni-tag>
    </view>
    <view class="actions">
      <uni-list>
        <uni-list-item title="个人信息" to="/pages/user/PersonalCenter/PersonalInfo" @click="modifyInfo" show-arrow/>
        <uni-list-item title="修改密码" to="/pages/user/PersonalCenter/ModifyPassword" @click="changePassword"
                       show-arrow></uni-list-item>
        <uni-list-item
            v-if="user.roleWbxqy!=='S'"
            title="查看历史用车申请"
            to="/pages/user/PersonalCenter/HistoryCarRequest" @click="viewCarRequests"
            show-arrow></uni-list-item>
        <uni-list-item
            v-if="user.roleWbxqy!=='S'"
            to="/pages/user/PersonalCenter/RatingList"
            title="查看历史评价" @click="viewFeedback"
            show-arrow></uni-list-item>
        <uni-list-item title="退出登录" @click="logout" clickable show-arrow></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {getUserInfo} from '../../api/userMG'

const user = ref({})

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const params = {} // 根据实际情况传递参数
    user.value = await getUserInfo(params)
  } catch (error) {
    console.error('获取用户信息失败', error)
  }
}

// 退出登录
const logout = () => {
  uni.showToast({title: "退出登录成功"})
  uni.removeStorageSync('token')
  uni.reLaunch({
    url: '/pages/common/login' // 跳转到登录页面
  })
  uni.showToast({title: "退出登录成功"})
}

// 页面加载时获取用户信息
onMounted(() => {
  fetchUserInfo()
})

const modifyInfo = (res) => {
  // 修改个人信息的逻辑
  console.log(res.data.errMsg)
}

const changePassword = (res) => {
  // 修改密码的逻辑
  console.log(res.data.errMsg)
}

const viewCarRequests = (res) => {
  // 查看历史用车申请的逻辑
  console.log(res.data.errMsg)
}

const viewTrips = (res) => {
  // 查看历史行程的逻辑
  console.log(res.data.errMsg)
}

const viewFeedback = (res) => {
  // 查看历史评价的逻辑
  console.log(res.data.errMsg)
}
const onClick = (res) => {
  console.log(res.data.errMsg)
  uni.showToast({title: "点击反馈"})
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
}

.header {
  width: 100%;
  height: 200px;
  background-color: #3b82f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 20px;
}

.department-name {
  font-size: 18px;
  margin-bottom: 10px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.user-id {
  font-size: 16px;
}

.actions {
  width: 100%;
}

.uni-list {
  width: 100%;
}

.uni-list-item {
  width: 100%;
  padding: 10px 15px;
}
</style>
